<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="../lib/css/reset.css" />
    <!-- 引入字体图标样式表 .css-->
    <link rel="stylesheet" href="../lib/fonts/iconfont.css">
    <!-- <link rel="stylesheet" href="../css/common.css" /> -->
    <!-- 引入轮播图样式表  swiper-bundle.min.css -->
    <link rel="stylesheet" href="../lib/css/swiper-bundle.min.css">
    <!-- 引入首页样式表 index.css -->
    <link rel="stylesheet" href="../css/index.css" />
    <!-- 引入轮播图js文档 -->
    <script src="../lib/js/swiper-bundle.min.js"></script>
    <!-- 引入axios库 -->
    <script src="../lib/js/axios.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="container">
            <!-- 登录注册 -->
            <div>
                <a href="../pages/login.html" class="login">登录</a>
                <a href="../pages/register.html">注册</a>
                <a href="#">消息通知</a>
            </div>
            <!-- 购物车 -->
            <div class="cart"><a href="../pages/cart.html"> <span class="iconfont icon-gouwuchekong"></span> 购物车( <span class="amount">0</span> )</a></div>
        </div>
    </div>
    <!-- 导航条 -->
    <div id="nav">
        <div class="container">
            <!-- 导航栏 -->
            <div class="mainnav">
                <a href="../pages/index.html"><img src="../static/images/logo.png" alt="logo" /></a>
                <div class="menu">
                    <div><a href="#">小米专区</a></div>
                    <div><a href="#">鸿蒙智联</a></div>
                    <div><a href="#">莫塞尔</a></div>
                    <div><a href="#">小米智选</a></div>
                    <div><a href="#">HarmonyOS</a></div>
                    <div><a href="#">特惠企采</a></div>
                    <div><a href="#">教育购</a></div>
                </div>
                <span class="iconfont icon-fangdajing"></span>  
            </div>
            <!-- 搜索框 -->
            
        </div>
    </div>
    <!-- 轮播图 -->
    <div id="banner">
        <div class="container">
            <div class="swiper">
                <!-- 侧边导航条 -->
                <ul class="sidebar">
                    <li class="active"><a href="#">手机<span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">电脑 <span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">智慧屏<span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">耳机音响<span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">穿戴<span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">配件<span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">穿戴<span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">门锁路由<span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">家用电器<span class="iconfont icon-jiantouyou"></span></a></li>
                    <li><a href="#">生态产品<span class="iconfont icon-jiantouyou"></span></a></li>
                </ul>
                <div class="swiper-wrapper">
               
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
    <!-- 主体内容 -->
    <div id="main">
        <div class="container">
            <!-- 分栏 -->
            <div class="column">
                <div>
                    <a href="#">
                        <div><img
                                src="https://res.vmallres.com/uomcdn/CN/cms/202201/FED4FA21CCED53EE303E43FC98DB4422.png.webp"
                                alt=""></div>
                        <div>智能家居</div>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <div><img
                                src="https://res.vmallres.com/uomcdn/CN/cms/202201/1E2C17B6DA24B0EA8131D9E458483F82.png.webp"
                                alt=""></div>
                        <div>影音娱乐</div>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <div><img
                                src="https://res.vmallres.com/uomcdn/CN/cms/202201/CFA86AA56103929B5E37A6332878BB29.png.webp"
                                alt=""></div>
                        <div>AITO汽车</div>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <div><img
                                src="https://res.vmallres.com/uomcdn/CN/cms/202108/96D51B483F18498112E94114B4AC7C7A.png.webp"
                                alt=""></div>
                        <div>超新计划</div>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <div><img
                                src="https://res.vmallres.com/uomcdn/CN/cms/202104/9B354D128BBE68DFA79995FD6AC73D00.webp"
                                alt=""></div>
                        <div>以旧换新</div>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <div><img
                                src="https://res.vmallres.com/uomcdn/CN/cms/202104/D772246BE15940855B040BF640B87809.webp"
                                alt=""></div>
                        <div>会员频道</div>
                    </a>
                </div>

            </div>
            <!-- 热夏爆款 -->
            <div class="showList">
                <img src="../static/images/hot.png.webp" alt="">
                <div class="productList">
                    <ul>
                    
                   
                    </ul>
                    <button>查看更多</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="footer">
        <div class="container">
            <ul>
                <li><a href="#"><span class="iconfont icon-weixiu"></span>预约维修服务</a></li>
                <li><a href="#"><span class="iconfont icon-shouhoutianbaotui"></span>7天无理由退货</a></li>
                <li><a href="#"><span class="iconfont icon-15tianbaotui01"></span>15天免费换货</a></li>
                <li><a href="#"><span class="iconfont icon-gift"></span>满69免费包邮</a></li>
                <li><a href="#"><span class="iconfont icon-dizhi"></span>520余家售后网点</a></li>
            </ul>
            <div class="wrapper">
                <div class="service ">
                    <ul>
                        <li class="title"><a href="#">帮助中心</a></li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">订单操作</a></li>
                    </ul>
                    <ul>
                        <li class="title"><a href="#">服务支持</a></li>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">自动服务</a></li>
                        <li><a href="#">相关下载</a></li>
                    </ul>
                    <ul>
                        <li class="title"><a href="#">线下门店</a></li>
                        <li><a href="#">小米之家</a></li>
                        <li><a href="#">服务网点</a></li>
                        <li><a href="#">授权体验店/专区</a></li>
                    </ul>
                    <ul>
                        <li class="title"><a href="#">关于小米</a></li>
                        <li><a href="#">了解小米</a></li>
                        <li><a href="#">加入小米</a></li>
                        <li><a href="#">投资者关系</a></li>
                        <li><a href="#">企业社会责任</a></li>
                        <li><a href="#">廉洁举报</a></li>
                    </ul>
                    <ul>
                        <li class="title"><a href="#">关注我们</a></li>
                        <li><a href="#">新浪微博</a></li>
                        <li><a href="#">官方微信</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">公益基金会</a></li>
                    </ul>
                    <ul>
                        <li class="title"><a href="#">特色服务</a></li>
                        <li><a href="#">F 码通道</a></li>
                        <li><a href="#">礼物码 </a></li>
                        <li><a href="#">防伪查询</a></li>
                    </ul>
                </div>
                <div class="linkUs">
                    <h2>400-100-5678</h2>
                    <h3>8:00-18:00&nbsp;（仅收市话费）</h3>
                    <button>人工客服</button>
                    <h4>关注小米：<a href="#"><span class="iconfont icon-weibo">&nbsp;</a><a href="#"></span><span class="iconfont icon-weixin"></span></a></h4>
                </div>
            </div>
            <div class="copyright">
                <div><a href="#">网站地图</a> | <a href="#">联系我们</a> | <a href="#">关注关注</a> | <a href="#">采购系统入口</a></div>
                <div>
                    分享到 :
                    <a href="#"><img src="../static/images/icon2.jpg" alt=""></a>
                    <a href="#"><img src="../static/images/icon3.jpg" alt=""></a>
                    <a href="#"><img src="../static/images/icon4.jpg" alt=""></a>
                    <a href="#"><img src="../static/images/icon5.jpg" alt=""></a>
                    <a href="#"><img src="../static/images/icon6.jpg" alt=""></a>
                </div>
                <div>
                    COPYRIGHT &copy;; 2013控股:控股集团版权 所有浙ICP备06005901号 技术支持:博采互动
                </div>
            </div>
        </div>

    </div>
   <!-- 侧栏返回顶部 -->
   <div id="return">
    <span class="iconfont icon-31huidaodingbu"></span>
   </div>
    <script src="../js/index.js"></script>
</body>

</html>